<template>
  <div>
    <button @click="comp = 'Count'">切换组件到Count</button>
    <button @click="comp = 'Movie'">切换组件到Movie</button>
    <!-- keep-alive包裹动态组件时 会缓存不活动的组件 而不是销毁它们 -->
    <!-- <keep-alive>默认缓存所有动态组件 -->
    <!-- include 和exclude允许组件有条件的缓存 -->
    <!-- include和exclued写法1逗号分隔字符串:<keep-alive include="Count,Movie"> -->
    <!-- include和exclued写法2数组:<keep-alive :include="['Count']"> -->
    <!-- include和exclued写法3正则表达式:<keep-alive :include="/Count/g"> -->
      <!-- include 包含的缓存组件 exclued 排除的组件缓存,优先级大于include -->
    <keep-alive>
      <component :is="comp" />
    </keep-alive>
  </div>
</template>

<script>
import Count from "./components/Count";
import Movie from "./components/Movie";
export default {
  name: "APP",
  components: {
    Count,
    Movie,
  },
  data() {
    return {
      comp: "Count",
    };
  },
};
</script>

<style scoped></style>
